<template>
  <div>
    <!-- 整个容器 -->
    <el-container class="contain">
      <!-- 上半部分：顶栏 -->
      <el-header height="798px">
        <el-row  style="width: 100%;margin: 0 auto;text-align: center">
          <img src="http://www.autotianjin.com.cn/i/web/images/images_tianjin_20230428/banner2.jpg" height="100%">
        </el-row>

        <el-row style="position: fixed;right: 50px;bottom: 50px;z-index: 1;text-align: center;">
          <el-row style="margin-top: 10px"><el-button type="warning" circle size="medium">
            <el-link :underline="false" href="/userManagement" circle v-if="isLogin">中心</el-link>
            <el-link :underline="false" href="/webLogin" circle v-else="isLogin">登录</el-link>
          </el-button></el-row>
          <el-row style="margin-top: 10px"><el-button type="success" circle size="medium">
            <el-link :underline="false" href="#moudle1" circle>回顾</el-link>
          </el-button></el-row>
          <el-row style="margin-top: 10px"><el-button type="primary" circle size="medium">
            <el-link :underline="false" href="#moudle3" circle>资讯</el-link>
          </el-button></el-row>
          <el-row style="margin-top: 10px"><el-button type="info" circle size="medium">
            <el-link :underline="false" href="#moudle5" circle>指南</el-link>
          </el-button></el-row>
        </el-row>
      </el-header>
      <!-- 下半部分 -->
      <el-main>
        <el-row style="width: 1200px;margin: 0px auto;">

          <el-row class="main-moudle">
            <el-col :span="12"> <img src="http://www.autotianjin.com.cn/i/web/images/images_tianjin_20230428/tongji.png" width=100% ></el-col>
            <el-col style="text-align: center" :span="9" :offset="3">
              <el-row class="online-buy">
                <el-link :underline="false" href="/showList">点击在线购票</el-link>
              </el-row>
              <el-row class="online-buy-text">
                温馨提示<br/>
                1、儿童购票：1.2M以下儿童不收取门票。
              </el-row>
            </el-col>
          </el-row>
          <!-- 往届回顾 -->
          <el-row class="main-moudle" id="moudle1">
            <el-row class="title-red" >
              往届回顾
              <el-divider></el-divider>
            </el-row>
            <el-row>
              <el-carousel :interval="4000" type="card" height="200px"
                           indicator-position="none" :initial-visible="2">
                <el-carousel-item v-for="banner in banner1" :key="banner.id">
                  <img :src="banner.url">
                </el-carousel-item>
              </el-carousel>
            </el-row>
          </el-row>
          <!-- 合作品牌 -->
          <el-row class="main-moudle" id="moudle2">
            <el-row class="title-red" >
              合作品牌
              <el-divider></el-divider>
            </el-row>
            <el-row class="title-sub">
              *具体参展品牌以现场实际为准。
            </el-row>
            <el-row>
              <img src="http://www.autotianjin.com.cn/i/web/images/images_tianjin_20230428/pinpai01.jpg">
            </el-row>
          </el-row>
          <!-- 新闻资讯 -->
          <el-row class="main-moudle" id="moudle3">
            <el-row class="title-red">
              新闻资讯
              <el-divider></el-divider>
            </el-row>
            <el-row class="content-paper" :gutter="20" >
              <el-col :span="12" v-for="paper in paperTop" style="margin: 5px 0;">
                <a :href="'/detail?id='+paper.id">
                  <el-card style="height: 150px">
                    <el-col :span="8">
                      <img :src="paper.url" width="100%"/>
                    </el-col>
                    <el-col :span="16" style="text-align: left">
                      <p style="font-size: 20px;" class="text-ellipsis">{{paper.title}}</p>
                      <p style="font-size: 12px;margin-top: 10px">{{paper.gmtCreate}}</p>
                      <p style="font-size: 14px;margin-top: 10px" class="text-ellipsis-2">{{paper.description}}</p>
                    </el-col>
                  </el-card>
                </a>
              </el-col>
            </el-row>
          </el-row>
          <!-- 名模佳丽 -->
          <el-row  class="main-moudle" id="moudle4">
            <el-row class="title-red">
              名模佳丽
              <el-divider></el-divider>
            </el-row>
            <el-row>
              <el-carousel :interval="3000" arrow="always" height="570px" indicator-position="outside">
                <el-carousel-item v-for="banner in banner2" :key="banner.id">
                  <img :src="banner.url">
                </el-carousel-item>
              </el-carousel>
            </el-row>
          </el-row>
          <!-- 交通指南 -->
          <el-row  class="main-moudle" id="moudle5" style="margin-bottom: 50px">
            <el-row class="title-red">
              交通指南
              <el-divider></el-divider>
            </el-row>
            <el-row>
              <el-col :span="10">
                <img src="http://www.autotianjin.com.cn/i/web/images/images_tianjin_20230428/adress.png" alt="">
              </el-col>
              <el-col :span="10" :offset="4" style="text-align: left;font-size: 15px;">
                <p class="title-p">展会地点：</p>
                <p class="content-p">梅江会展中心二期（西青区悦波路与江湾路交汇处西南100米）</p>
                <p class="title-p">公交线路：</p>
                <p class="content-p">705路西线、636路、838路、96路、337路、711路、826路、机场巴士、529路、705路东线;</p>
                <p class="title-p">地铁线路：</p>
                <p class="content-p">地铁6号线，“梅江会展中心”站A口出；</p>
                <p class="title-p">自驾导航：</p>
                <p class="content-p">展馆位于天津市西青区汇川路221号，自驾导航“梅江会展中心二期”即可，自驾观众可选择在梅江会展中心二期停车场停车，10元/次。</p>
              </el-col>
            </el-row>
          </el-row>

        </el-row>
      </el-main>
      <el-footer height="200px">
        <el-row style="width: 1200px !important;margin: 0px auto;color:#fff;">
         <el-col :span="13" style="margin-top: 20px">
           <el-row>
             <el-col :span="10">
               <p class="title">主办单位
                 <el-divider></el-divider>
               </p>
               <p>中国汽车流通协会</p>
               <p>百瑞国际会展集团有限公司</p>
               <p>中国国际贸易促进委员会天津市分会</p>
             </el-col>
             <el-col :span="7">
               <p class="title">承办单位<el-divider></el-divider></p>
               <p>天津国际展览有限公司</p>
               <p>北京杜米文化传播有限公司</p>
             </el-col>
             <el-col :span="7">
               <p class="title" style="width: 100px">特别支持单位<el-divider></el-divider></p>
               <p>天津汽车流通协会</p>
             </el-col>
           </el-row>
           <el-row style="font-size: 14px;margin-top: 6px">
             Copyright © 2023 天津浩特瑞展览有限公司津ICP备16007344号-2技术支持：沣泽霖（北京）信息科技有限公司
           </el-row>
         </el-col>
         <el-col :span="4" style="text-align: center;margin-top: 20px">
           <img width="90" src="http://www.autotianjin.com.cn/i/web/images/images_tianjin_20230428/code_weixin.jpg" alt="">
           <p>扫一扫关注公众号</p>
         </el-col>
         <el-col :span="5" style="text-align: center;margin-top: 20px">
           <img src="http://www.autotianjin.com.cn/i/web/images/footer_logo.png" width="100%" alt="">
           <p style="font-size: 16px;margin-top: 10px">服务热线</p>
           <p style="font-size: 22px;margin-top: 15px">400-8099-016</p>
         </el-col>
        </el-row>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
import global from '../../Global'
let preUserUrl = global.preUsers;
let preBannerUrl = global.preBanners;
export default {
  data() {
    return {
      isLogin: false,
      banner1: [],
      paperTop: [
        {id:'1',url:'http://www.autotianjin.com.cn/i/u/2304/19/79626556_300x225.jpg'
        ,title:'【车模小姐姐】4月28日-5月3日dfsd富商大贾的方法似懂非懂',gmtCreate:'2023-06-18 10:00:00',description:'车与美女从来都是一对密不可分的黄金搭档，20bfdgfdgfd风大不大鬼地方个梵蒂冈代发给代发给代发给代发23第十一届天津梅江五一国际车水电费水电费水电费手动阀四大分三大发撒展当'},
        {id:'2',url:'http://www.autotianjin.com.cn/i/u/2304/19/79626556_300x225.jpg'
          ,title:'【车模小姐姐】4月28日-5月3日',gmtCreate:'2023-06-18 10:00:00',description:'车与美女从来都是一对密不可分的黄金搭档，2023第十一届天津梅江五一国际车展当'},
        {id:'3',url:'http://www.autotianjin.com.cn/i/u/2304/19/79626556_300x225.jpg'
          ,title:'【车模小姐姐】4月28日-5月3日',gmtCreate:'2023-06-18 10:00:00',description:'车与美女从来都是一对密不可分的黄金搭档，2023第十一届天津梅江五一国际车展当'},
        {id:'4',url:'http://www.autotianjin.com.cn/i/u/2304/19/79626556_300x225.jpg'
          ,title:'【车模小姐姐】4月28日-5月3日',gmtCreate:'2023-06-18 10:00:00',description:'车与美女从来都是一对密不可分的黄金搭档，2023第十一届天津梅江五一国际车展当'},
        {id:'5',url:'http://www.autotianjin.com.cn/i/u/2304/19/79626556_300x225.jpg'
          ,title:'【车模小姐姐】4月28日-5月3日',gmtCreate:'2023-06-18 10:00:00',description:'车与美女从来都是一对密不可分的黄金搭档，2023第十一届天津梅江五一国际车展当'},
        {id:'5',url:'http://www.autotianjin.com.cn/i/u/2304/19/79626556_300x225.jpg'
          ,title:'【车模小姐姐】4月28日-5月3日',gmtCreate:'2023-06-18 10:00:00',description:'车与美女从来都是一对密不可分的黄金搭档，2023第十一届天津梅江五一国际车展当'}
      ],
      banner2: [],
      dialogFormVisible: false,
      ruleForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    //加载轮播图列表
    loadBannerList(typeId){
      console.log(typeId)
      let typeUrl = '';
      if(typeId != ''){
        typeUrl = '/type/' + typeId;
      }

      let url = preBannerUrl + typeUrl + "?queryType=all";
      this.axios
          .get(url).then((response) => {
        let jsonResult = response.data;
        if(jsonResult.state == 20000){
          if(typeId==1){
            this.banner1 = jsonResult.data.list;
          }else if(typeId == 2){
            this.banner2 = jsonResult.data.list;
          }
        }else{
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    isLoginCheck(){
      let localJwt = localStorage.getItem('localJwt');
      if(localJwt){
        this.isLogin = true;
      }
    }
  },
  mounted() {
    this.loadBannerList(1);
    this.loadBannerList(2);
    this.isLoginCheck();
  }
}
</script>

<style>
.el-container{
  color: #000;
  background-color: #fff;
}
.text-ellipsis{
  overflow:hidden;
  white-space: nowrap;/*设置文本不换行*/
  text-overflow:ellipsis;/*设置文本超出时 用省略号展示*/
}
.text-ellipsis-2{
  overflow:hidden;
  text-overflow:ellipsis;/*设置文本超出时 用省略号展示*/
  display: -webkit-box;
  -webkit-line-clamp: 2; /*多行在这里修改数字即可*/
  /*overflow:hidden;*/
  -webkit-box-orient: vertical;
}
.el-carousel__arrow i {
  font-size: 29px !important;
  color: #f00;
}

.el-dialog__header{
  padding: 0;
}

.el-dialog__body{
  padding-top: 15px;
}

.el-header{
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.el-main{
  margin: 0;
  padding: 0;
  background-color: #fff;
  position: relative;
  top: 0px;
}

.el-main .main-moudle{
  margin-top: 45px;
  text-align: center;
}

.el-main .online-buy{
  width: 450px;
  border: 1px solid red;
  line-height: 68px;
  border-radius: 50px;
}
.el-main .online-buy .el-link{
  font-weight: bold;
  font-size: 24px;
  color: red;
}
.el-main .online-buy-text{
  border: 1px dashed red;
  border-radius: 10px;
  margin-top: 5px;
  height: 100px;
  font-size: 14px;
  line-height: 25px;
}
.el-main .main-moudle .title-red{
  width: 160px;
  margin: 0 auto;
  font-weight: bold;
  font-size: 34px;
  color: red;
  letter-spacing: 6px;
}
.el-main .main-moudle .title-red .el-divider{
  background-color: red;
  height: 2px;
}
.el-main .main-moudle .title-sub{
  width: 320px;
  margin: 0 auto;
  font-weight: bold;
  font-size: 14px;
  color: #8c939d;
  letter-spacing: 2px;
}
.el-main .main-moudle .title-p{
  width: 100px;
  line-height: 30px;
  background-color: #ffd925;
  color: #f00;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
  text-align: center;
  font-weight: bold;
  margin-top: 10px;
}
.el-main .main-moudle .content-p{
  margin-top: 10px;
  line-height: 30px;
}

.el-footer{
  font-size: 12px;
  margin: 0;
  padding: 0;
  background-color: #242424;
  overflow: hidden;
  position: relative;
  bottom: 0px;

}
.el-footer .title{
  width: 80px;
}
.el-footer .title .el-divider{
  background-color: #ffd04b;
  height: 2px;
  margin: 8px 0;
}
.el-footer p{
  margin-top: 6px;
}
</style>





